<template>
  <div>
    <div class="header">
      <img v-bind:src="[header+info.data.logo]">
      <router-link to="/aboutUs">关于我们</router-link>
      <router-link to="/introduction" class="active">公司简介</router-link>
      <router-link to="/index">首页</router-link>
    </div>
      <yd-slider autoplay="3000">
        <yd-slider-item v-for='(image,index) in info.data.banner' :key='index'>
          <img :src="['https://sy.mujiwulian.net/sy/'+image]">
        </yd-slider-item>
      </yd-slider>
    <div>
      <div class="jianjie">
        <img src="../assets/公司简介@2x.png">
      </div>
      <div class="line">
        <span class="p">COMPANY PROFILE</span>
      </div>
    </div>
    <div class="abs">
      <yd-flexbox>
        <div>
          <img class="gsimgzz" v-bind:src="header+info.data.abs.absImgPath">
        </div>
        <yd-flexbox-item class="newItem">
          <p>{{info.data.abs.absContent}}</p>
        </yd-flexbox-item>
      </yd-flexbox>
    </div>

    <div class="youshi">
        <img src="../assets/公司优势@2x.png" >
    </div>

    <yd-grids-group :rows="2" id="pics">
      <yd-grids-item v-for="ad in info.data.adv">
        <div slot="else" style="text-align: center;" >
          <div class="img-border">
            <img class="img-adv " v-bind:src="header+ad.advantageImgPath">
          </div>
          <div class="caption">
            <h3>{{ad.advantageAbs}}</h3>
            <p>{{ad.advantageContent}}</p>
          </div>
        </div>
      </yd-grids-item>
    </yd-grids-group>

    <div class="jianjie">
        <img src="../assets/公司资质-b@2x.png">
    </div>
    <div >
      <img class="imgzz" v-bind:src="header+info.data.abs.aptitudeImgPath" >
    </div>
  </div>
</template>

<script>
    export default {
        name: "Introduction",
        data() {
          return {
            header:"https://sy.mujiwulian.net/sy/",
            mark: 0,
            info:{
              code: null,
              msg: "",
              data: {
                banner: [
                ],
                abs: {
                  id: null,
                  absImgPath: "",
                  absContent: "",
                  aptitudeImgPath: ""
                },
                adv: [
                  {
                    id: null,
                    advantageImgPath: "",
                    advantageAbs: "",
                    advantageContent: ""
                  }
                ]
              }
            }
          }
      },
      mounted() {
        this.$axios
          .get("https://sy.mujiwulian.net/sy/website/abs/?sy="+this.$store.getters.getUser.sy)
          .then(response=>(this.info=response.data));
      }
    }
</script>

<style scoped>
  *{
    margin: 0px;
    padding: 0px;
  }
  .header{
    height: 50px;
    background-color: #194b6a;
    color: aliceblue;
  }
  .header a{
    height: 100%;
    font-size: 10px;
    float: right;
    display:block;
    width: 55px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 50px; /* 设置垂直居中 */
  }
  .active{
    background-color: #39ccbe;
  }
  .header img{
    margin-top: 7.5px;
    margin-left: 10px;
    height: 35px;
    width: 35px;
  }
  .line{
    width: 100%;
  }
  .jianjie img{
    height: 56px;
    width: auto;
    margin: 10px;
  }
  .p {
    font-size: 15px;
    margin-bottom:20px;
    float: right;
    padding-right: 5%;
    color: #46B8DA;
  }
  .abs{
    clear:both;
    margin-bottom: 20px;
  }
  .gsimgzz{
    width: 100px;
    margin-left: 10px;
  }
  .newItem p{
    margin-left: 20px;
    margin-right: 20px;
    text-indent:2em;
  }
  .youshi img{
    height: 56px;
    width: auto;
    float: right;
  }
  .img-adv{
    border-radius: 50%;
    width: 150px;
    height: 150px;
  }
  #pics{
    clear:both;
    margin-top: 20px;
  }
  img.imgzz
  {
    padding-right: 5%;
    padding-left: 5%;
    height: 90%;
    width: 100%;
  }
</style>
